<template>
    <!-- http://localhost:8080/category/${phone} -->
    <div class="category-wrap">
        <el-divider style="margin-top: 40px;" id="todo-divider">{{ title }}</el-divider>

        <!--分类区-->
        <div style="margin-top: 50px">
            <el-row :gutter="30">

                <el-col :span="12"  class="today-item" v-for="(item,index) in brandInfoArray" :key="index">
                    <el-card class="box-card" @click.native="goto(item.brandId)" shadow="hover">
                        <div slot="header" class="clearfix">
                            <div class="title">
                               <!-- <el-link :underline="false" style=" color: #f03867;">7.6折起</el-link>-->
                                <el-link :underline="false">{{ item.describe }}</el-link>
                            </div>
                        </div>
                        <div class="text item" >
                            <img :src="staticPrefix + item.logo" width="657px" height="330px">
                        </div>
                    </el-card>
                </el-col>

            </el-row>
        </div>
    </div>
</template>


<script>
    import settings from '@/settings'
    import { getBrandByCategory } from "@/api/categoryAndBrand";

    export default {
        name: "Category",
        data(){
            return{
                staticPrefix: settings.staticPrefix,

                brandInfoArray: [
/*                    {
                        brandId: '101',
                        brandName: "vivo",
                        logo: '/goods/phone/vivo.jpg',
                        describe: 'vivo手机专场'
                    },*/
                ],
            }
        },
        methods:{
            goto(brand){// 根据品牌前往品牌页
                console.log(brand)
                //this.$route.params.category 是父页面传来的，brand是数据循环出来的
                this.$router.push({ path: `/${this.$route.params.category}/brand/${brand}/`,})
            },
            init(){// 根据分区参数查询该分区的品牌
                console.log("init = ",this.title)
                getBrandByCategory(this.$route.params.category).then(response => {
                    console.log(response)
                    if (response.state === true) {
                        this.brandInfoArray = response.data.brands
                        this.$notify.success({title: '成功',message: response.message, duration: 1500});
                    }else{
                        this.$notify.warning({title: '失败',message: response.message, duration: 1500});
                    }
                })
            },
        },
        computed: {
            title(){
                switch (this.$route.params.category) {
                    case "phone":return '手机专区'
                    case "computer":return '电脑专区'
                    case "intelligent":return '智能硬件专区'
                    case "accessory":return '配件专区'
                }
            },
        },
        filters: {
        },
        beforeMount(){
            console.log("category.vue接收的参数 =",this.$route.params.category)
            this.init()
        },
    }
</script>

<style scoped>

    .title a{
        font-size: 26px;
    }
    >>>.el-card__body{
        padding: 0;
    }

    .category-wrap{
        /*background-color: whitesmoke;*/
        width: 70vw;
        margin: 10px auto 50px auto;
    }
    #todo-divider{
        margin-top: 50px;
    }
    .el-divider__text{
        font-size: 30px;
        font-weight: 600;
    }

    /*card*/
    .today-item{
        margin: 10px 0;
        cursor: pointer;
    }
    .box-card{
  /*      height: 330px;*/
    }
    .text {
        font-size: 14px;
        display: flex;
        justify-content: space-between;
    }


</style>
